<template>
	<view>
		<view class="container" v-if=" task.task_id ">
			<!-- 顶部操作栏 -->
			<view class="header dis-flex flex-x-between">
				<form @submit="onTargetHome" report-submit="true">
					<button form-type="submit" class="btn-normal">
						<view class="item-touch">
							<text>返回首页</text>
						</view>
					</button>
				</form>
				<form @submit="onToggleRules" report-submit="true">
					<button form-type="submit" class="btn-normal">
						<view class="item-touch">
							<text>玩法详情</text>
						</view>
					</button>
				</form>
			</view>

			<view class="content">
				<!-- 砍价信息 -->
				<view class="infos-wrap">
					<view class="infos-top">
						<view class="infos-img">
							<image :src=" task.user.avatarUrl "></image>
						</view>
						<view class="infos-name">
							<text>{{ task.user.nickName }}</text>
						</view>
					</view>
					<view class="infos-mask">
						<view class="infos-prompt" v-if=" active.prompt_words ">
							<text>{{ active.prompt_words }}</text>
						</view>
						<!-- 商品信息 -->
						<form @submit="onTargetGoods" report-submit="true">
							<button form-type="submit" class="btn-normal">
								<view class="infos-item">
									<view class="infos-item-img">
										<image :src=" goods.goods_image "></image>
									</view>
									<view class="infos-item-info">
										<view class="infos-item-name">
											<text class="twolist-hidden">{{ goods.goods_name }}</text>
										</view>
										<view class="infos-item-stock">
											<view class="stock-widget">
												<text>仅剩{{ goods.goods_sku.stock_num }}件</text>
											</view>
										</view>
										<view class="infos-item-price dis-flex flex-y-end">
											<text class="price1 col-m">底价¥</text>
											<text class="price2 col-m">{{ task.floor_price }}</text>
											<text class="price3">¥{{ task.goods_price }}</text>
										</view>
									</view>
								</view>
							</button>
						</form>

					</view>
				</view>

				<!-- 分割线 -->
				<view class="connect">
					<view class="connect-ring bgf-ring--left">
						<text></text>
					</view>
					<view class="connect-ring bgf-ring--right">
						<text></text>
					</view>
				</view>

				<!-- 砍价进度 -->
				<view class="bargain-wrap">
					<!-- 已砍数目 -->
					<view class="bargain-info">
						<view v-if=" task.status " class="bargain-ing">
							<block v-if=" !task.is_floor ">
								<text>已砍</text>
								<text class="focal col-m">{{ task.cut_money }}</text>
								<text>元，还差</text>
								<text class="focal col-m">{{ task.surplus_money }}</text>
								<text>元</text>
							</block>
							<block v-else>
								<text>已砍至最低</text>
								<text class="focal col-m">{{ task.floor_price }}</text>
								<text>元，砍价成功！</text>
							</block>
						</view>
						<view v-else class="bargain-ing">
							<text class="col-9">该砍价活动已结束～</text>
						</view>
					</view>
					<!-- 砍价进度条 -->
					<view class="bgn__process m-top30">
						<view class="bgn__process-bottom">
							<view class="bgn__process-process process--ani" :style="[{'width':  bargain_rate }]"></view>
						</view>
					</view>
					<!-- 操作按钮 -->
					<view class="btn-container m-top30 dis-flex flex-x-center">
						<!-- 立即购买 -->
						<form v-if=" showBuyBtn " @submit="onCheckout" report-submit="true">
							<button form-type="submit" class="btn-normal">
								<view class="btn-item btn-item__buy" :class=" task.is_floor ? 'complete' : '' ">
									<text>立即购买</text>
								</view>
							</button>
						</form>
						<!-- 分享给朋友 -->
						<button v-if=" showShareBtn " open-type="share" class="btn-normal">
							<view class="btn-item btn-item__main">
								<text>邀请好友砍价</text>
							</view>
						</button>
						<!-- 砍刀操作 -->
						<form v-if=" showCatBtn " @submit="onHelpCut" report-submit="true">
							<button form-type="submit" class="btn-normal">
								<view class="btn-item btn-item__main btn-item-long">
									<text>帮TA砍一刀</text>
								</view>
							</button>
						</form>
						<!-- 查看其他砍价活动 -->
						<form v-if=" showOtherBtn " @submit="onTargetBargain" report-submit="true">
							<button form-type="submit" class="btn-normal">
								<view class="btn-item btn-item__main btn-item-long">
									<text>查看其他砍价活动</text>
								</view>
							</button>
						</form>
					</view>
					<!-- 到期时间 -->
					<view class="bargain-p" v-if=" task.status ">
						<view class="bargain-people" v-for=" (item,index) in taskEndTime " :key="index">
							<text>活动还剩 {{ item.dynamic.hou }} : {{ item.dynamic.min }} : {{ item.dynamic.sec }} 结束，快来砍价吧~</text>
						</view>
					</view>
				</view>
				<!-- 好友助力榜 -->
				<view class="records-container" v-if=" help_list.length ">
					<view class="records">
						<view class="records-back"></view>
						<view class="records-content">
							<view class="records-h2">
								<text>好友助力榜</text>
							</view>
							<view class="friend-help">
								<view class="records-item" v-for=" (item,indexs) in help_list " :key="indexs">
									<view class="records-left">
										<image :src=" item.user.avatarUrl "></image>
										<text>{{ item.user.nickName }}</text>
									</view>
									<view class="records-right semibold">
										<text class="bold">减 </text>
										<text class="red">¥{{ item.cut_money }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 砍价规则 -->
			<!-- <zandialog id="zan-base-dialog"></zandialog> -->

<!-- 			<xy-dialog title="砍价规则" content="" :show="dialogshow" @cancelButton="clickCancel" @confirmButton="clickConfirm" :isShowCancel="!dialogshow" confirmColor="#df5000">
				<view style="padding: 0 30upx 30upx;text-align:left;">
					<view v-for="(items,indexs) in rule_detail" :key='index' style="margin: 20upx 0upx;">
						{{items}}
					</view>
				</view>
			</xy-dialog> -->
			
			
			<xy-dialog title="砍价规则" content="" :show="dialogshow" 
			 :isShowCancel="!dialogshow" confirmColor="#df5000">
				<!-- rule_detail -->
				<view style="padding: 0 30upx 30upx;text-align:left;">
					<view v-for="(items,indexs) in rule_detail" :key='indexs' style="margin: 20upx 0upx;">
						{{items}}
					</view>
				</view>
			</xy-dialog>

		</view>
	</view>
</template>

<script>
	import zandialog from '../../../components/dialog/index.vue'
	// 工具类
	import util from '../../../utils/util.js';

	// 倒计时插件
	import CountDown from '../../../utils/countdown.js';

	// 对话框插件
	import Dialog from '../../../components/dialog/dialog';

	import xyDialog from '@/components/xy-dialog/xy-dialog.vue';
	export default {
		computed: {
			bargain_rate() {
				return this.task.bargain_rate + '%'
			}
		},

		components: {
			// （组件命名）
			zandialog,
			xyDialog
		},
		props: {
			zandialog: {}
		},

		data() {
			return {
				dialogshow: false, //拼团规则是否显示
				rule_detail: {},
				// 砍价任务倒计时
				taskEndTime: [],

				task: {}, // 砍价任务详情
				active: {}, // 活动详情
				goods: {}, // 商品详情
				help_list: [], // 好友助力榜

				is_creater: false, // 是否为当前砍价任务的发起人
				is_cut: false, // 当前是否已砍
				setting: {}, // 砍价规则

				showBuyBtn: false, // 立即购买
				showShareBtn: false, // 邀请好友砍价
				showCatBtn: false, // 帮TA砍一刀
				showOtherBtn: false, // 查看其他砍价活动
				task_id: '',
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			// 砍价任务id
			_this.setData({
				task_id: options.task_id
			});

		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			let _this = this;
			// 获取砍价任务详情
			_this.getTaskDetail();
		},
		methods: {

			/**
			 * 获取砍价任务详情
			 */
			getTaskDetail() {
				let _this = this;
				_this._get('bargain.task/detail', {
					task_id: _this.task_id
				}, (result) => {
					// 初始化页面数据
					_this._initData(result.data);
				});
			},

			/**
			 * 初始化页面数据
			 */
			_initData(data) {
				let _this = this;
				// 初始化：显示操作按钮
				_this._initShowBtn(data);
				// 记录活动到期时间
				data.taskEndTime = [{
					date: data.task.end_time
				}];
				_this.setData(data);
				// 执行倒计时
				if (!data.task.is_end) {
					CountDown.onSetTimeList(_this, 'taskEndTime');
				}
			},

			/**
			 * 初始化：显示操作按钮
			 */
			_initShowBtn(data) {
				let _this = this,
					// 立即购买
					showBuyBtn = data.is_creater && !data.task.is_buy && data.task.status && (!data.active.is_floor_buy || data.task.is_floor),
					// 帮砍一刀
					showCatBtn = !data.is_creater && !data.is_cut && !data.task.is_floor && data.task.status,
					// 邀请好友砍价
					showShareBtn = !showCatBtn && !data.task.is_floor && data.task.status,
					// 查看其他砍价活动
					showOtherBtn = !showBuyBtn && !showShareBtn && !showCatBtn;
				_this.setData({
					showBuyBtn,
					showShareBtn,
					showCatBtn,
					showOtherBtn,
				});
			},

			/**
			 * 跳转到首页
			 */
			onTargetHome(e) {
				// 记录formid
				this.saveFormId(e.detail.formId);
				uni.switchTab({
					url: '../../index/index',
				})
			},

			/**
			 * 显示砍价规则
			 */
			onToggleRules(e) {

				let _this = this;
				var str = _this.setting.bargain_rules;
				// 分割句号
				var rule_detail = str.split("。");

				_this.setData({
					dialogshow: !_this.dialogshow,
					rule_detail: rule_detail,
				});

				return false;

				// uni-app未知原因无法使用自定义Dialog组件
				// 记录formId
				this.saveFormId(e.detail.formId);
				// 显示砍价规则
				Dialog({
					title: '砍价规则',
					message: _this.setting.bargain_rules,
					selector: '#zan-base-dialog',
					isScroll: true, // 滚动
					buttons: [{
						text: '关闭',
						color: 'red',
						type: 'cash'
					}]
				});
			},

			/**
			 * 跳转到商品详情
			 */
			onTargetGoods(e) {
				let _this = this;
				// 记录formid
				_this.saveFormId(e.detail.formId);
				uni.navigateTo({
					url: '../goods/index?active_id=' + _this.task.active_id,
				})
			},

			/**
			 * 跳转到砍价首页
			 */
			onTargetBargain(e) {
				// 记录formid
				this.saveFormId(e.detail.formId);
				uni.navigateTo({
					url: '../index/index',
				})
			},

			/**
			 * 帮砍一刀
			 */
			onHelpCut(e) {
				let _this = this;
				// 记录formId
				_this.saveFormId(e.detail.formId);
				// 按钮禁用时不允许操作(防重复提交)
				if (_this.disabled == true) {
					return false;
				}
				// 设置按钮禁用
				_this.setData({
					disabled: true
				});
				// 提交到后端
				_this._post_form('bargain.task/help_cut', {
					task_id: _this.task_id
				}, result => {
					_this.showSuccess(result.msg, function() {
						uni.navigateBack();
					});
					// 获取砍价任务详情
					_this.getTaskDetail();
				}, false, () => {
					// 解除禁用
					_this.setData({
						disabled: false
					});
				});
			},

			/**
			 * 立即购买
			 */
			onCheckout(e) {
				let _this = this;
				// 记录formId
				_this.saveFormId(e.detail.formId);

				// 跳转到结算台
				let option = util.urlEncode({
					order_type: 'bargain',
					task_id: _this.task.task_id,
					goods_sku_id: _this.task.spec_sku_id,
					// #ifdef APP-PLUS
					posttype: "android",
					// #endif
				});
				uni.navigateTo({
					url: '../../flow/checkout?' + option
				});

			},

			/**
			 * 用户点击右上角分享
			 */
			onShareAppMessage() {
				let _this = this;
				// 构建页面参数
				let params = _this.getShareUrlParams({
					task_id: _this.task_id
				});
				return {
					title: _this.active.share_title,
					path: '/pages/bargain/task/index?' + params
				};
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
	}

	.container {
		background: url(https://si.geilicdn.com/img-310900000167962321710a026860-unadjust_750_686.png) top no-repeat,
			linear-gradient(90deg, #fea044, #f9565d 63%, #e63378);
		background-size: 100% auto;
		min-height: 100%;
	}

	/* 头部区域 */

	.header {
		padding: 30upx 30upx;
	}

	.header .item-touch {
		color: #fff;
		font-size: 24upx;
		padding: 7upx 20upx;
		background: rgba(0, 0, 0, 0.17);
		border-radius: 22upx;
	}

	/* 内容区域 */

	.content {
		position: relative;
		box-sizing: border-box;
		padding: 10upx 30upx 60upx 30upx;
	}

	/* 砍价信息 */

	.infos-wrap {
		background: #fff;
		box-shadow: 0 4upx 40upx 0 rgba(144, 52, 52, 0.1);
		padding: 0 30upx 40upx;
		border-radius: 16upx;
	}

	.infos-top {
		position: relative;
		top: -42upx;
		margin-bottom: -22upx;
	}

	.infos-img {
		width: 120upx;
		height: 120upx;
		padding: 8upx;
		background: #fff;
		overflow: hidden;
		margin: 0 auto;
		border-radius: 50%;
	}

	.infos-img image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.infos-name {
		margin: 8upx auto 0;
		width: 80%;
		font-size: 26upx;
		color: #9a9a9a;
		text-align: center;
		line-height: 32upx;
	}

	.infos-prompt {
		text-align: center;
		font-size: 30upx;
		color: #222;
		line-height: 48upx;
		margin-bottom: 30upx;
	}

	.infos-item {
		margin-top: 40upx;
		display: flex;
	}

	.infos-item-img {
		flex: none;
		width: 180upx;
		height: 180upx;
	}

	.infos-item-img image {
		width: 100%;
		height: 100%;
	}

	.infos-item-info {
		margin-left: 25upx;
		flex: auto;
	}

	.infos-item-name {
		font-size: 28upx;
		color: #404040;
		line-height: 40upx;
		height: 80upx;
	}

	.infos-item-stock {
		/* margin-top: 8upx; */
	}

	.infos-item-stock .stock-widget {
		display: inline-block;
		min-width: 100upx;
		padding: 0 20upx;
		background-image: linear-gradient(-90deg, #fe9c3f, #fb6253 99%);
		border-radius: 40upx;
		height: 40upx;
		font-size: 24upx;
		color: #fff;
		line-height: 40upx;
	}

	.infos-item-price {
		font-size: 0;
		margin-top: 12upx;
	}

	.infos-item-price .price1 {
		font-size: 24upx;
		line-height: 32upx;
	}

	.infos-item-price .price2 {
		margin-left: 4upx;
		font-size: 36upx;
		line-height: 40upx;
	}

	.infos-item-price .price3 {
		margin-left: 10upx;
		font-size: 24upx;
		color: #9a9a9a;
		line-height: 32upx;
		text-decoration: line-through;
	}

	/* 分割线 */

	.connect {
		position: relative;
		height: 20upx;
	}

	.connect-ring {
		position: absolute;
		top: -28upx;
		height: 76upx;
		width: 20upx;
		padding: 8upx 6upx;
		box-sizing: border-box;
	}

	.connect-ring text {
		position: relative;
		z-index: 8;
		display: block;
		height: 100%;
		width: 100%;
		background: #fff;
		border-radius: 20upx;
	}

	.connect-ring:after,
	.connect-ring:before {
		content: "";
		position: absolute;
		z-index: 6;
		left: 0;
		height: 20upx;
		width: 20upx;
		border-radius: 20upx;
	}

	.connect-ring.bgf-ring--left {
		left: 20upx;
	}

	.connect-ring.bgf-ring--left:before {
		top: 0;
		background: #f4914e;
	}

	.connect-ring.bgf-ring--left:after {
		bottom: 0;
		background: #f4914e;
	}

	.connect-ring.bgf-ring--right {
		right: 20upx;
	}

	.connect-ring.bgf-ring--right:before {
		top: 0;
		background: #e03e71;
	}

	.connect-ring.bgf-ring--right:after {
		bottom: 0;
		background: #e03e71;
	}

	/* 砍价进度 */

	.bargain-wrap {
		position: relative;
		background: #fff;
		padding: 40upx 30upx 30upx;
		box-shadow: 0 4upx 40upx 0 rgba(144, 52, 52, 0.1);
		border-radius: 16upx;
	}

	.bargain-info {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28upx;
		color: #404040;
		line-height: 40upx;
	}

	.bargain-info .focal {
		margin: 0 5upx;
	}

	.bargain-p {
		margin-top: 40upx;
		min-height: 32upx;
	}

	.bargain-people {
		font-size: 24upx;
		color: #9a9a9a;
		text-align: center;
		line-height: 32upx;
	}

	/* 进度条 */

	.bgn__process {
		position: relative;
		padding: 30upx 0;
	}

	.bgn__process-bottom {
		z-index: 1;
		overflow: hidden;
		background-image: linear-gradient(0deg, #f0f2f7, #e8ebf3);
	}

	.bgn__process-bottom,
	.bgn__process-process {
		position: relative;
		height: 30upx;
		border-radius: 30upx;
	}

	.bgn__process-process {
		background-image: linear-gradient(90deg, #ffc108, #fde586);
		background: #ffc108;
	}

	.bgn__process-process.process--ani:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 32upx;
		top: 50%;
		left: 0;
		margin-top: -16upx;
	}

	/* 操作按钮 */

	.btn-container .btn-item {
		color: #fff;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		font-size: 30upx;
		border-radius: 15upx;
		flex: 1;
	}

	.btn-item__buy {
		width: 240upx;
		margin-right: 30upx;
		background-image: linear-gradient(90deg, #fa9e1b, #fe5b1b);
		box-shadow: #fe5b1b 0 22upx 48upx -22upx;
	}

	.btn-item__buy.complete {
		width: 360upx;
		animation: btn_anim 0.9s linear infinite;
		transform-origin: center;
	}

	.btn-item__main {
		width: 320upx;
		background-image: linear-gradient(90deg, #fe316c, #fd584e);
		box-shadow: #fd584e 0 22upx 48upx -22upx;
		animation: btn_anim 0.9s linear infinite;
		transform-origin: center;
	}

	.btn-item-long {
		width: 460upx;
	}

	/* 按钮动画 */

	@keyframes btn_anim {
		0% {
			-webkit-transform: scale(1);
			transform: scale(1);
		}

		40% {
			-webkit-transform: scale(1.05);
			transform: scale(1.05);
		}
	}

	/* 好友助力榜 */

	.records-container {
		margin-top: 44upx;
	}

	.records {
		position: relative;
		color: #404040;
		box-shadow: 0 4upx 40upx 0 rgba(0, 0, 0, 0.08);
	}

	.records-back {
		position: absolute;
		left: -14upx;
		right: -14upx;
		top: -14upx;
		height: 28upx;
		border-radius: 28upx;
		z-index: 1;
		background: #cb272d;
	}

	.records-content {
		position: relative;
		z-index: 2;
		background: #fff;
		padding: 40upx 30upx;
	}

	.records-h2 {
		display: flex;
		justify-content: space-between;
		height: 60upx;
		align-items: center;
	}

	.records-h2 text {
		position: relative;
		font-weight: 700;
		font-size: 34upx;
		line-height: 48upx;
	}

	.friend-help {
		overflow: hidden;
		padding: 40upx 0 20upx;
		transition: max-height 0.6s ease-out;
		/* max-height: 280upx; */
	}

	.records-left,
	.records-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10upx;
	}

	.records-left image {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
	}

	.records-left text {
		display: inline-block;
		margin-left: 14upx;
	}

	.records-left text,
	.records-right {
		font-size: 28upx;
		line-height: 40upx;
	}

	.records-right .red {
		color: #e53a40;
	}
</style>
